body{
    margin:0;
    padding: 0;
    background-color: #0A0A0A;
}
.time{
    position: absolute;
        color: #FFFFFF;
            font-size: 1.6em;
            top: 120px;
    left: 85px;
}
.timerstyle{
    font-size: 1.6em;
    position: absolute;
    color: #FFFFFF;
    top: 185px;
    left: 94px;
}

.timer_hours {
    width: 400px;
    height:400px;
    margin: 100px auto;
    position: relative;
    border: 1px solid transparent;
}

.hours_wrapper{
    width: 200px;
    height: 400px;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.hours_right {
    right: 0;
}

.hours_left {
    left: 0;
}

.hours_circleProgress {
    width: 360px;
    height: 360px;
    border: 20px solid #000000;
    border-radius: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(-135deg);
}

.hours_rightcircle {
    border-top: 20px solid #4F115C;
    border-right: 20px solid #4F115C;
    right: 0;
    -webkit-animation: circleProgressLoad_right 3600s linear infinite;
}

.hours_leftcircle {
    border-bottom: 20px solid #4F115C;
    border-left: 20px solid #4F115C;
    left: 0;
    -webkit-animation: circleProgressLoad_left 3600s linear infinite;
}

.timer_minutes {
    width: 350px;
    height:350px;
    margin: 25px auto;
    position: relative;
    border: 1px solid transparent;
}

.minutes_wrapper{
    width: 175px;
    height: 350px;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.minutes_right {
    right: 0;
}

.minutes_left {
    left: 0;
}

.minutes_circleProgress {
    width: 310px;
    height: 310px;
    border: 20px solid #3A3A3A;
    border-radius: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(-135deg);
}

.minutes_rightcircle {
    border-top: 20px solid #145D91;
    border-right: 20px solid #145D91;
    right: 0;
    -webkit-animation: circleProgressLoad_right 60s linear infinite;
}

.minutes_leftcircle {
    border-bottom: 20px solid #145D91;
    border-left: 20px solid #145D91;
    left: 0;
    -webkit-animation: circleProgressLoad_left 60s linear infinite;
}

.timer_second {
    width: 300px;
    height:300px;
    margin: 25px auto;
    position: relative;
    border: 1px solid transparent;
}

.second_wrapper{
    width: 150px;
    height: 300px;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.second_right {
    right: 0;
}

.second_left {
    left: 0;
}

.second_circleProgress {
    width: 296px;
    height: 296px;
    border: 2px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(-135deg);
}

.second_rightcircle {
    border-top: 2px solid #959595;
    border-right: 2px solid #959595;
    right: 0;
    -webkit-animation: circleProgressLoad_right 1s linear infinite;
}

.second_leftcircle {
    border-bottom: 2px solid #959595;
    border-left: 2px solid #959595;
    left: 0;
    -webkit-animation: circleProgressLoad_left 1s linear infinite;
}

@-webkit-keyframes circleProgressLoad_right {
    0% {
        -webkit-transform: rotate(-135deg);
    }
    50%,
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@-webkit-keyframes circleProgressLoad_left {
    0%,
    50% {
        -webkit-transform: rotate(-135deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}